<template>
	<view class="logoin-big" :style="{paddingTop:topXp+'px'}">
		<image class="login-background" src="../../static/login_bg@2x.png" mode=""></image>
		<view class="top-nav-box">
			<view class="top-nav-box-left" :style="{height:headerHight+'px'}" @click="gotoIndex">
				<u-icon name="arrow-left" color="#000" size="24"></u-icon>
			</view>
		</view>
		<image src="../../static/login_logo@2x.png" class="logo-icon" mode=""></image>
		<view class="tl_btn" v-if="!is_xy" @click="noneGx">手机号快捷登录</view>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class='tl_btn' size="default" v-if="is_xy">手机号快捷登录</button>
		<checkbox-group @change="checkboxChange">
			<label class="xieyi-box">
				<checkbox value="1" style="transform:scale(0.7)" color="#376FFF"/>
				<view>新用户将自动注册易通AI，并同意<text @click="gotoxieyi">《易通AI用户协议》</text></view> 
			</label>
		</checkbox-group>
		<view class="bottom-slogan">
			<view class="bottom-slogan-span"></view>
			<view class="bottom-slogan-p">
				Ai改变世界
			</view>
			<view class="bottom-slogan-span"></view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import { mapMutations } from 'vuex'
	
	export default{
		data(){
			return{
				topXp:0,
				headerHight:0,
				is_xy:false
			}
		},
		onLoad() {
			this.getTop()
		},
		methods:{
			...mapMutations(['SET_USERNEWS']),
			getTop(){
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.topXp = menuButtonInfo.top
				this.headerHight = menuButtonInfo.height
			},
			checkboxChange(e){
				this.is_xy = e.detail.value[0] == 1 ? true : false
			},
			noneGx(){
				if(!this.is_xy){
					return uni.showToast({
						title:'请勾选同意协议！',
						icon:'none'
					})
				}
			},
			//获取手机号授权
			getPhoneNumber(e) {
				console.log(e);
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					//同意
					var _this = this
					let encryptedData = e.detail.encryptedData
					let iv = e.detail.iv
					//获取code
					uni.showLoading({
						title: '加载中'
					})
					http.getLogin({
						code: e.detail.code
					}).then((res) => {
						if (res.data.code == 200) {
							let data = res.data.result
							uni.setStorageSync('uid',data.uid)
							uni.setStorageSync('phone',data.name)
							http.getUserNews({
								user_id:data.uid
							}).then((ress)=>{
								uni.hideLoading()
								let userNews = ress.data.result
								userNews.phone = data.name
								_this.SET_USERNEWS(userNews)
								//创建易通AI标识
								http.postCreateChat({
									user_id:data.uid
								}).then((res)=>{
									console.log(res)
									uni.hideLoading()
									if(res.data.code == 200){
										uni.setStorageSync('yitongAiID',res.data.result)
										uni.redirectTo({
											url:'/pages/index/index'
										})
									}
								})
								
							})
							
						} else {
							wx.showToast({
								title: res.data.msg,
								icon: 'error',
								duration: 2000
							})
						}
					})
			
				} else {
					//拒绝
					console.log('拒绝')
				}
			},
			gotoIndex(){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			},
			gotoxieyi(){
				uni.navigateTo({
					url:'/pages/xieyi/xieyi?name=用户协议'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.logoin-big{
		width: 100%;
		min-height: 100vh;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		.login-background{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;
			left: 0;
			top: 0;
		}
		.top-nav-box{
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			position: relative;
			box-sizing: border-box;
			padding: 0 15px;
			.top-nav-box-left{
				display: flex;
			}
			.top-nav-box-right{
				position: absolute;
				right: 0;
				z-index: 10;
			}
		}
		.logo-icon{
			width: 107px;
			height: 122.68px;
			margin: 0 auto;
			display: block;
			margin-top: 40px;
		}
		.tl_btn{
			width: 90%;
			margin: 0 auto;
			display: block;
			text-align: center;
			line-height: 50px;
			border: none;
			height: 50px;
			border-radius: 10px;
			background: $main-color;
			color: #fff;
			margin-top: 90px;
			font-size: 16px;
		}
		.xieyi-box{
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			color: #999;
			margin-top: 20px;
			text{
				color:$main-color;
			}
		}
		.bottom-slogan{
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 25px;
			left: 0;
			z-index: 1;
			font-size: 14px;
			color: #92B1FF;
			.bottom-slogan-span{
				width: 20px;
				height: 1px;
				background: #92B1FF;
				margin: 0 10px;
			}
		}
	}
</style>